import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
const App = () => {
  const state = useSelector((state) => state);
  const dispatch = useDispatch();
  const [value, setValue] = useState(9999);
  return (
    <div>
      <div>
        <div>count: {state.count}</div>
        <button onClick={() => dispatch({ type: "changeCount", payload: +1 })}>
          +1
        </button>
        <button onClick={() => dispatch({ type: "changeCount", payload: -1 })}>
          -1
        </button>
        <button onClick={() => dispatch({ type: "changeCount", payload: +10 })}>
          +10
        </button>
        <button
          onClick={() => dispatch({ type: "changeCount", payload: +100 })}
        >
          +100
        </button>
        <button onClick={() => dispatch({ type: "changeCount", payload: -99 })}>
          -99
        </button>
        {/* 受控组件 */}
        <input
          type="number"
          placeholder="请输入变化的值"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />

        { value }
        <button onClick={() => dispatch({ type: "changeCount", payload: +value })}>确定修改</button>
      </div>


      <div>
        1231231
      </div>
    </div>
  );
};

export default App;
